<template>
  <div class="peopleHouse"
       v-loading.fullscreen.lock="loading">
    <el-col :span="6"
            class="left-box">
      <!-- 人员库组织架构树 -->
      <LibraryPeOrgTree :assignedNode.sync="assignNode"
                        :treeHeight.sync="treeHeight"
                        :isDelete.sync="isDelete"
                        :isRefresh.sync="isRefresh"
                        :assignedTemplateNode.sync="assignTemplateNode"
                        :assignedPermissionNode.sync="assignPermissionNode"
                        :curMenu.sync="selectedNode"></LibraryPeOrgTree>
    </el-col>
    <el-col :span="18">
      <el-row :gutter="20">
        <el-form label-width="80px">
          <el-col :span="8">
            <el-form-item label="岗位名称">
              <el-select v-model="requestParam.job_name"
                         placeholder="请选择岗位名称">
                <el-option v-for="(option,index) in jobNameList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理层级">
              <el-select v-model="requestParam.manage_level"
                         placeholder="请选择管理层级">
                <el-option v-for="(option,index) in manageLevelList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职务层别">
              <el-select v-model="requestParam.job_level"
                         placeholder="请选择职务层别">
                <el-option v-for="(option,index) in jobLevelList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="职务级别">
              <el-select v-model="requestParam.job_level"
                         placeholder="请选择职务级别">
                <el-option v-for="(option,index) in jobLevelList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="requestParam.search_word"
                        placeholder="请输入姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
                  class="flex-end">
            <el-button @click="search"
                       type="primary">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24"
                style="margin-bottom:20px">
          <el-button @click="addPeople"
                     :disabled="requestParam.node_id?false:true"
                     :type="requestParam.node_id?'primary':'info'">新增</el-button>
          <el-upload class="upload-demo"
                     action=""
                     :http-request="uploadFile"
                     multiple
                     :show-file-list="false"
                     :limit="1"
                     name="excels"
                     accept=".xls,.xlsx"
                     ref="uploadFile">
            <el-button type="primary">导入账号</el-button>
          </el-upload>
          <el-button type="primary"
                     @click="downExcel">下载模板</el-button>
          <el-button :type="onIsDisabled()?'info':'primary'"
                     :disabled="onIsDisabled()"
                     @click="onExport">导出</el-button>
        </el-col>
        <el-col :span="24">
          <el-table :highlight-current-row="true"
                    border
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="peopleList.list">
            <el-table-column type="index"
                             label="序号"
                             sortable
                             align="center"
                             width="80"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="person_name"
                             label="姓名"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="联系方式"
                             prop="phone"
                             width="120"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="岗位名称"
                             show-overflow-tooltip
                             prop="job_name"
                             align="center">
            </el-table-column>
            <el-table-column prop="manage_level"
                             label="岗位层级"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="job_level"
                             label="管理层级"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="strip_line"
                             label="职务级别"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="strip_line"
                             label="条线"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="person_status"
                             label="员工状态"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p>{{scope.row.person_status === '1'?'在岗' : '试用期'}}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right"
                             width="200px"
                             align="center">
              <template slot-scope="scope">
                <el-button type="text"
                           @click="lookPeople(scope.row)">查看</el-button>
                <el-button type="text"
                           @click="editPeople(scope.row)">修改</el-button>
                <el-button @click="deletePeople(scope.row)"
                           type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                style="margin-top:20px!important;">
          <el-pagination @current-change="handlePageChange"
                         @size-change="handleSizeChange"
                         :current-page="requestParam.page"
                         :page-size="requestParam.page_size"
                         layout="total,sizes,prev, pager, next, jumper"
                         background
                         :total="peopleList.total_count"
                         align="center">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>
<script>
import LibraryPeOrgTree from './components/LibraryPeOrgTree'
import { backEvaluateApi } from '@/services/ProjectCenter'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  name: 'platPeopleWarehousePage',
  components: {
    LibraryPeOrgTree
  },
  data () {
    return {
      isRefresh: false,//树是否刷新；
      isDelete: false,//判断树的当前节点是否删除
      treeHeight: '100%',
      // 当前选择的组织树节点数据
      selectedNode: {},
      // 右键分配权限时选中的节点
      assignPermissionNode: {},
      // 右键分配模板时选中的节点
      assignTemplateNode: {},
      // 右键分配人员时选中的节点
      assignNode: {},
      requestParam: {
        node_id: '',//节点主键值
        node_type: '',//树节点类型
        no_job_id: '',//不显示属于当前岗位id的用户列表，用户岗位添加时的用户列表
        comp_id: '',
        search_word: '',
        person_status: '',
        job_name: '',
        manage_level: '',
        job_level: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      resetParam: {
        comp_id: '',
        search_word: '',
        person_status: '',
        job_name: '',
        manage_level: '',
        job_level: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      checkList: {
        field: '',
        p_field_value: '',
        p_field: '',
      },
      peopleStatusList: [], //员工状态
      jobNameList: [], //岗位名称
      manageLevelList: [], //管理层级
      jobLevelList: [], //职务级别
      oneOrganList: [], //一级机构
      twoOrganList: [],
      threeOrganList: [],
      fourOrganList: [],
      fiveOrganList: [],
      sixOrganList: [],
      peopleList: {
        list: [],
        total: 0,
        total_count: 0
      },
      loading: false
    }
  },
  activated () {//当前页面激活时调用该钩子函数
    this.isRefresh = false;
    this.search();//刷新
  },
  async created () {
    await this.getPeopleStatusCode();
    await this.getjobNameList();
    await this.getmanageLevelList();
    await this.getjobLevelList();
    await this.getoneOrganList();

    this.requestParam.comp_id = JSON.parse(window.localStorage.userInfo).comp_id// 公司id
    // if (this.selectedNode.node_id_desc) {
    this.search()
    // };

  },
  mounted () {

  },
  methods: {
    onIsDisabled () {
      let isDisabled = false;
      if (!this.requestParam.node_type) {
        isDisabled = true;
      };
      return isDisabled;
    },

    onExport () {//导出人员
      this.loading = true
      backEvaluateApi.exportPepoleData({
        data: {
          node_type: this.requestParam.node_type,//节点类型，1：单位、组织，2：部门
          node_id: this.requestParam.node_id,//节点id
        }
      }).then((res) => {
        this.loading = false
        let a = document.createElement("a");
        let blob = new Blob([res], { type: 'application/vnd.ms-excel' });
        a.href = URL.createObjectURL(blob);
        a.download = "人员列表";
        a.target = "_blank";
        a.click();
      }).catch((error) => {
        this.loading = false
        console.log(error)
      })
    },
    // 上传文件 导入
    uploadFile (params) {
      this.isRefresh = false;
      var formData = new FormData()
      formData.append('comp_id', this.requestParam.comp_id)
      formData.append('person_excel', params.file)
      backEvaluateApi.importPeople({
        data: formData
      }).then(res => {
        if (res.code === 0) {
          this.isRefresh = true;
          this.$message.success('上传成功')
          this.search();//刷新
        } else {
        }
        this.$refs.uploadFile.clearFiles()
      }, err => {
        this.$refs.uploadFile.clearFiles()
      })
    },
    //下载
    downExcel () {
      var alink = document.createElement('a')
      alink.href = 'http://hibuilding-new.oss-cn-hangzhou.aliyuncs.com/template/%E4%BA%BA%E5%91%98%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E6%A8%A1%E6%9D%BF.xlsx'
      alink.download = ''// 图片名
      alink.click()
    },
    // 获取员工状态标准码
    getPeopleStatusCode () {
      return standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'platPersonStatus'
        }
      }).then(res => {
        if (res.code === 0 && res.data.list) {
          this.peopleStatusList = res.data.list
          // window.localStorage.setItem('dataOriginCode', JSON.stringify(this.dataOriginCode))
        }
      })
    },
    //获取岗位名称下拉框数据
    getjobNameList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'job_name',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.jobNameList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //获取管理层级下拉框数据
    getmanageLevelList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'manage_level',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.manageLevelList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //获取职务级别下拉框数据
    getjobLevelList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'job_level',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.jobLevelList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //获取一级机构下拉框数据
    getoneOrganList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.requestParam.comp_id,
          field: 'one_organ',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.oneOrganList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //选择一级机构
    changeOne (val) {
      this.checkList.field = 'two_organ'
      this.checkList.p_field = 'one_organ'
      this.checkList.p_field_value = val
      this.getelseOrgan()
    },
    //二级
    changeTwo (val) {
      this.checkList.field = 'three_organ'
      this.checkList.p_field = 'two_organ'
      this.checkList.p_field_value = val
      this.getelseOrgan()
    },
    //三级
    changeThree (val) {
      this.checkList.field = 'four_organ'
      this.checkList.p_field = 'three_organ'
      this.checkList.p_field_value = val
      this.getelseOrgan()
    },
    //四级
    changeFour (val) {
      this.checkList.field = 'five_organ'
      this.checkList.p_field = 'four_organ'
      this.checkList.p_field_value = val
      this.getelseOrgan()
    },
    //五级
    changeFive (val) {
      this.checkList.field = 'six_organ'
      this.checkList.p_field = 'five_organ'
      this.checkList.p_field_value = val
      this.getelseOrgan()
    },
    //获取机构下拉框数据
    getelseOrgan () {
      let param = { comp_id: this.requestParam.comp_id, ...this.checkList }
      backEvaluateApi.getSelectList({
        params: param
      }).then((res) => {
        if (this.checkList.field === 'two_organ') {
          this.twoOrganList = res.data.list
        } else if (this.checkList.field === 'three_organ') {
          this.threeOrganList = res.data.list
        } else if (this.checkList.field === 'four_organ') {
          this.fourOrganList = res.data.list
        } else if (this.checkList.field === 'five_organ') {
          this.fiveOrganList = res.data.list
        } else {
          this.sixOrganList = res.data.list
        }

      }).catch(err => {
        console.log(err);
      })
    },

    //查询
    search () {
      this.isRefresh = true;
      backEvaluateApi.getPersonList({
        params: this.requestParam
      }).then((res) => {
        if (res.code === 0) {
          this.peopleList = res.data;
          console.log('测试   isRefresh=', this.isRefresh)
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //重置
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.requestParam = Object.assign(this.requestParam, reset)
      this.search()
    },
    //分页
    handlePageChange (val) {
      this.requestParam.page = val
      this.search()
    },
    handleSizeChange (val) {
      this.requestParam.page_size = val
      this.search()
    },
    //新增
    addPeople () {
      let nodeId = this.requestParam.node_id;//节点主键值
      let nodeType = this.requestParam.node_type;//节点的类型
      this.$router.push({
        path: "/AddpeopleHouse",
        query: { type: 'add', node_id: nodeId, node_type: nodeType }
      });
    },
    //查看
    lookPeople (row) {
      this.$router.push({
        path: "/AddpeopleHouse",
        query: { type: 'look', personId: row.person_id }
      });
    },
    //修改
    editPeople (row) {
      this.$router.push({
        path: "/AddpeopleHouse",
        query: { type: 'edit', personId: row.person_id }
      });
    },
    //删除
    deletePeople (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        backEvaluateApi.deletePeopleList({
          params: {
            person_id: row.person_id
          }
        }).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功!')
            this.search()
            this.getoneOrganList()
          }
        }).catch(err => {
          console.log(err);
        })
      }).catch(() => {

      });
    }
  },
  computed: {},
  watch: {
    isDelete (n, o) {//当前树的节点是否是删除
      if (n == true) {
        this.requestParam.node_id = '';//重置
        this.requestParam.node_type = '';//重置
        this.search();//刷新
      };
    },
    selectedNode (n, o) {
      if (n.node_id_desc && n.node_id_desc != o.node_id_desc) {//node_id_desc存在
        // requestParam: {
        //   node_id: '',//节点主键值
        //     node_type: '',//树节点类型
        //       no_job_id: '',//不显示属于当前岗位id的用户列表，用户岗位添加时的用户列表
        this.requestParam.node_id = n.node_id || '';
        this.requestParam.node_type = n.node_type || '';
        this.handlePageChange(1);//刷新
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.peopleHouse {
  padding: 20px;
  .left-box {
    padding-right: 20px;
  }
  .el-select {
    display: block;
  }
  .upload-demo {
    margin: 0 10px;
    display: inline-block;
  }
}
</style>
